[[ define "home/index.html" ]]
<!-- 如果多级目录中的文件名相同时，需要在html文件中声明一下别名，供后端发送html()时使用，避免加载模板文件被替换掉-->

[[template "head" .]] <!-- 调用定义的公共头部模板文件 -->




<!-- 媒体展示区域 - 优化版本 -->
<div class="mb-0">
    <div class="relative w-full">
        <div class="carousel-wrapper relative bg-gray-800 overflow-hidden w-full group">
            <div class="carousel-content flex transition-transform duration-500 ease-in-out">
                <!-- 幻灯片1 -->
                <div class="carousel-slide w-full flex-shrink-0 flex items-center justify-center bg-gray-800">
                    <div class="w-full flex items-center justify-center">
                        <img src="/assets/img/1-1200x600.jpg" alt="后台界面展示" class="w-full h-auto max-h-[500px] object-contain">
                    </div>
                </div>
                <!-- 幻灯片2 -->
                <div class="carousel-slide w-full flex-shrink-0 flex items-center justify-center bg-gray-800">
                    <div class="w-full flex items-center justify-center">
                        <img src="/assets/img/2-1200x600.jpg" alt="火山代码展示" class="w-full h-auto max-h-[500px] object-contain">
                    </div>
                </div>
                <!-- 幻灯片3 -->
                <div class="carousel-slide w-full flex-shrink-0 flex items-center justify-center bg-gray-800">
                    <div class="w-full flex items-center justify-center">
                        <img src="/assets/img/3-1200x600.jpg" alt="界面灵活展示" class="w-full h-auto max-h-[500px] object-contain">
                    </div>
                </div>
                <!-- 幻灯片4 -->
                <div class="carousel-slide w-full flex-shrink-0 flex items-center justify-center bg-gray-800">
                    <div class="w-full flex items-center justify-center">
                        <img src="/assets/img/4-1200x600.jpg" alt="界面灵活展示" class="w-full h-auto max-h-[500px] object-contain">
                    </div>
                </div>
            </div>
            
            <!-- 导航按钮 - 默认隐藏，鼠标悬停时显示 -->
            <button class="carousel-prev btn btn-circle btn-primary absolute left-4 top-1/2 transform -translate-y-1/2 z-10 opacity-0 group-hover:opacity-80 hover:!opacity-100 transition-all duration-300">
                <i class="fa fa-chevron-left"></i>
            </button>
            <button class="carousel-next btn btn-circle btn-primary absolute right-4 top-1/2 transform -translate-y-1/2 z-10 opacity-0 group-hover:opacity-80 hover:!opacity-100 transition-all duration-300">
                <i class="fa fa-chevron-right"></i>
            </button>
            
            <!-- 指示器 - 放在广告内部下方 -->
            <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
                <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all duration-300" data-slide="0"></button>
                <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all duration-300" data-slide="1"></button>
                <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all duration-300" data-slide="2"></button>
                <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all duration-300" data-slide="3"></button>
            </div>
        </div>
    </div>
</div>

<style>
.carousel-wrapper {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
}
.carousel-content {
    display: flex;
    width: 100%;
}
.carousel-slide {
    flex-shrink: 0;
    width: 100%;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carouselContent = document.querySelector('.carousel-content');
    const slides = document.querySelectorAll('.carousel-slide');
    const prevBtn = document.querySelector('.carousel-prev');
    const nextBtn = document.querySelector('.carousel-next');
    const indicators = document.querySelectorAll('.carousel-indicator');
    
    let currentSlide = 0;
    const totalSlides = slides.length; // 现在会自动计算为4
    
    // 更新轮播图位置
    function updateCarousel() {
        carouselContent.style.transform = `translateX(-${currentSlide * 100}%)`;
        
        // 更新指示器状态
        indicators.forEach((indicator, index) => {
            if (index === currentSlide) {
                indicator.classList.remove('bg-white/50');
                indicator.classList.add('bg-white', 'w-4');
            } else {
                indicator.classList.remove('bg-white', 'w-4');
                indicator.classList.add('bg-white/50', 'w-3');
            }
        });
    }
    
    // 下一张 - 支持循环
    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateCarousel();
    }
    
    // 上一张 - 支持循环
    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        updateCarousel();
    }
    
    // 绑定事件
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);
    
    // 指示器点击事件
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            currentSlide = index;
            updateCarousel();
        });
    });
    
    // 自动轮播
    let autoPlay = setInterval(nextSlide, 5000);
    
    // 鼠标悬停时暂停自动轮播
    const carouselWrapper = document.querySelector('.carousel-wrapper');
    carouselWrapper.addEventListener('mouseenter', () => {
        clearInterval(autoPlay);
    });
    
    carouselWrapper.addEventListener('mouseleave', () => {
        autoPlay = setInterval(nextSlide, 5000);
    });
    
    // 响应窗口大小变化
    window.addEventListener('resize', updateCarousel);
    
    // 初始化
    updateCarousel();
});
</script>





<!-- 新闻展示区域 -->
<section class="py-12 bg-base-100">
    <div class="container mx-auto px-4">
        <div class="text-center mb-10">
            <h2 class="text-3xl md:text-4xl font-bold text-base-content mb-4">新闻资讯</h2>
            <p class="text-base-content/70 max-w-2xl mx-auto">了解最新动态、产品更新和行业资讯</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 新闻项1 -->
            <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300">
                <figure class="px-6 pt-6">
                    <img src="/assets/img/news1.jpg" alt="新闻标题1" class="rounded-lg h-48 w-full object-cover">
                </figure>
                <div class="card-body p-6">
                    <div class="flex items-center text-sm text-base-content/60 mb-2">
                        <i class="fa fa-calendar mr-2"></i>
                        <span>2025-01-15</span>
                    </div>
                    <h3 class="card-title text-lg font-bold text-base-content mb-3">产品重大更新发布</h3>
                    <p class="text-base-content/70 mb-4">本次更新带来了多项功能优化和性能提升，用户体验得到显著改善。</p>
                    <div class="card-actions">
                        <a href="/news/1" class="btn btn-primary btn-sm">查阅详情</a>
                    </div>
                </div>
            </div>
            
            <!-- 新闻项2 -->
            <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300">
                <figure class="px-6 pt-6">
                    <img src="/assets/img/news2.jpg" alt="新闻标题2" class="rounded-lg h-48 w-full object-cover">
                </figure>
                <div class="card-body p-6">
                    <div class="flex items-center text-sm text-base-content/60 mb-2">
                        <i class="fa fa-calendar mr-2"></i>
                        <span>2024-12-20</span>
                    </div>
                    <h3 class="card-title text-lg font-bold text-base-content mb-3">技术研讨会圆满成功</h3>
                    <p class="text-base-content/70 mb-4">我们在北京成功举办了年度技术研讨会，吸引了众多开发者和合作伙伴参与。</p>
                    <div class="card-actions">
                        <a href="/news/2" class="btn btn-primary btn-sm">查阅详情</a>
                    </div>
                </div>
            </div>
            
            <!-- 新闻项3 -->
            <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300">
                <figure class="px-6 pt-6">
                    <img src="/assets/img/news3.jpg" alt="新闻标题3" class="rounded-lg h-48 w-full object-cover">
                </figure>
                <div class="card-body p-6">
                    <div class="flex items-center text-sm text-base-content/60 mb-2">
                        <i class="fa fa-calendar mr-2"></i>
                        <span>2024-11-05</span>
                    </div>
                    <h3 class="card-title text-lg font-bold text-base-content mb-3">新增合作伙伴公告</h3>
                    <p class="text-base-content/70 mb-4">我们很高兴宣布与多家知名企业达成战略合作，共同推动行业发展。</p>
                    <div class="card-actions">
                        <a href="/news/3" class="btn btn-primary btn-sm">查阅详情</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 查看更多按钮 -->
        <div class="text-center mt-10">
            <a href="/news" class="btn btn-outline btn-primary px-8">
                <i class="fa fa-newspaper mr-2"></i>查阅更多资讯
            </a>
        </div>
    </div>
</section>

<style>
/* 新闻卡片悬停效果增强 */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
}
</style>




[[template "foot" .]] <!-- 调用定义的公共底部模板文件 -->

[[end]]